﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>c4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <header class="header">
      <h1>c4 - Connect Four</h1>
    </header>
    <section class="section">
      <div class="section-message"></div>
      <canvas class="section-canvas"></canvas>
    </section>

    <div class="mode">
      <div class="mode-chooser">
        <h1>c4 - Connect Four</h1>
        <p>
          Welcome to connect four game!<br />Please refer to
          <a href="https://en.wikipedia.org/wiki/Connect_Four" target="_blank"
            >Wikipedia article on Connect Four</a
          >
          for how to play.
        </p>
        <h2>Mode chooser</h2>
        <label
          ><input
            class="mode-chooser-input"
            type="radio"
            name="mode"
            value="offline-ai"
            checked
          />
          Offline: Human player vs AI player</label
        ><br />
        <label
          ><input
            class="mode-chooser-input"
            type="radio"
            name="mode"
            value="offline-human"
          />
          Offline: Human player vs human player</label
        ><br /><label
          ><input
            class="mode-chooser-input"
            type="radio"
            name="mode"
            value="online-human"
          />
          Online: Human player vs human player</label
        ><br />
        <button class="mode-chooser-submit">Start game</button>
      </div>
    </div>
    <div class="statusbox hidden">
      <div class="statusbox-body">
        <div class="statusbox-body-connection">...</div>
        <div class="statusbox-body-game">...</div>
        <div class="statusbox-body-player">...</div>
      </div>
    </div>
    <div class="message hidden">
      <div class="message-body">
        <div class="message-body-content"></div>
        <button class="message-body-dismiss">OK</button>
      </div>
    </div>
    <footer class="footer">
      By <a href="http://kenrick95.org">Kenrick95</a>. Fork this project at
      <a href="https://github.com/kenrick95/c4">GitHub</a>.
    </footer>
    <script src="./app.ts"></script>
  </body>
</html>
